<template>
  <div class="center_map d_c" :style="{ height: mapHeight }">
    <div class="map_container">
      <map-main
        v-if="show"
        ref="map"
        :cyDataList="cyDataList"
        :isFullscreen="isFullscreen"
        @changFullscreen="changFullscreen"
      ></map-main>
    </div>
    
  </div>
</template>

<script>
import MapMain from "./MapMain.vue";
import cyList from "@/assets/json/cy_list.js";
import { areaTransform } from "@/utils/areaTransform.js";
export default {
  components: {
    MapMain,
  },
  props: {
    isFullscreen: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      mapHeight: "100%",
      show: true,
      cyDataList: [],
    };
  },
  mounted() {
    this.getIndustryAreaListFun();
  },
  methods: {
    getIndustryAreaListFun() {
      this.cyDataList = cyList;
    },
    changFullscreen(data) {
      if (data) {
        this.mapHeight = "100%";
      } else {
        this.mapHeight = "627px";
      }
      this.$emit("changeFull", data);
      this.show = false;

      setTimeout(() => {
        this.show = true;
      }, 1000);
    },
    drawPolygon() {
      if (this.cyDataList.length > 0) {
        this.$refs.map.clearLayer();
        this.cyDataList.forEach((x, index) => {
          let lonlat = areaTransform(x.lonlat);
          let data = {
            area: x.geom,
            name: x.areaName,
            center: lonlat.path[0],
          };
          this.$refs.map.handleSelectFence(data, index);
        });
      }
      // let data = {
      //   area: "Polygon (0.001016138798726515 0.000357563397514582, 0.001016139569756708 0.0003575145277636693, 0.001016250598104507 0.0003574977926774636, 0.0010162513691347002 0.0003575651745251207)",
      //   name: "能源产业",
      //   center: [113.121096, 39.80088],
      // };
      // this.$refs.map.handleSelectFence(data);
    },
    changeCockpit() {
      this.$refs.map.mapDescShow = false;
      this.$refs.map.cockpitShow = !this.$refs.map.cockpitShow;
    },
  },
};
</script>

<style lang="scss" scoped>
.center_map {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  .map_l,
  .map_r {
    height: 100%;
    width: auto;
    position: absolute;
    top: 0;
    z-index: 100;
  }
  .map_l {
    left: 0;
  }
  .map_r {
    right: 0;
  }
  .map_container {
    width: 100%;
    height: 100%;
  }

  .map_title {
    width: 934px;
    height: 57px;
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    img {
      width: 50%;
      height: auto;
    }
  }
}
</style>